<template>
	<view>
		
		<!--
		  uniapp 插件封装大全
			作者：神夜
			QQ:564379992
			交流群：942832552			
			
			使用插件首请先安装： npm install @dcloudio/uni-ui
			在page.json中加入代码
			//自动引入组件
			"easycom": {
				"autoscan": true,
				"custom": {
					"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
				}
			}
			
			在App.vue中引入公共样式
			<style>
				::-webkit-scrollbar{ width: 0; height: 0; color: transparent; }
				.flex{ display: flex; align-items: center;}
				.between{ display: flex; align-items: center; justify-content: space-between;}
				.center{ display: flex; align-items: center; justify-content:center; }
			</style>
		 -->
		
		<!--
		可滑动tab切换插件 u-scroll-tab
		参数说明：tabs 滑动数组集合 scroll [true|false]是否滑动  color 颜色 
		事件说明：@click 点击事件
		-->
		<view class="top">
			<u-scroll-tab :tabs="tabs" :scroll="true" color="#f60" @click="tabclick"></u-scroll-tab>
		</view>
		
		<view class="content" v-for="(item,index) in tabs" v-if="index===current">
			这是{{tabs[current]}}的内容
		</view>
		
		<view class="top">
			<u-scroll-tab :tabs="tabs2" :scroll="false" color="#a90" @click="tabclick2"></u-scroll-tab>
		</view>
		<view class="content" v-for="(item,index) in tabs" v-if="index===current2">
			这是{{tabs2[current2]}}的内容
		</view>
		
		<!--
		通用弹窗插件 u-alert
		参数说明：type [1 普通弹窗| 2询问弹窗| 3带输入内容弹窗]弹窗类型; content 弹窗内容 
		事件说明：@confirm 点击确定事件 @cancel 点击取消事件
		-->
		<view class="center">
			<view class="btn center" @tap="show">确定</view>
			<view class="btn center" @tap="show2">询问</view>
		</view>
		<u-alert ref="alert" :type="1" :content="content" @confirm="confirm"></u-alert>
		<u-alert ref="alert2" :type="2" :content="content" @confirm="confirm2" @cancel="cancel"></u-alert>
		
		<!--
		checkbox 插件 u-checkbox
		参数说明：checked [true|false] 选中状态
		事件说明：@change 点击事件
		-->		
		<view class="center" style="padding-top: 50rpx;"><u-checkbox :checked="checked" @change="change"></u-checkbox></view>
		
		<!--
		无限级选择插件 u-duoselect
		参数说明：具体查看插件 数据源可点击的时候请求，也可一次性传入
		事件说明：@select 点击确定选择事件
		-->		
		<input type="text" v-model="names" disabled placeholder="无限层级选择器" @tap="select" placeholder-style="color:#999" class="inext"/>
		<u-duoselect ref="duo" @select="confirmSelect"></u-duoselect>
		
		
		<!--
		圆形进度条插件 u-circlebar
		参数说明：percent [0~100] 当前进度 color 颜色
		-->
		
		<view class="between" style="padding:50rpx 100rpx;">
			<u-circlebar :percent="50" color="#1479FC"></u-circlebar>
			<u-circlebar :percent="60" color="#f60"></u-circlebar>
			<u-circlebar :percent="80" color="#fa0"></u-circlebar>
		</view>
		
		
		<!--
		动画插件 u-transition
		参数说明: type [scale放大|up由上往下|down由下往上] 动画类型; show [true|false] 显示动画
		-->		
		
		<view class="between">
			<view class="btn center" @tap="open">放大动画</view>
			<view class="btn center" @tap="open1">由上往下</view>
			<view class="btn center" @tap="open2">由下往上</view>
		</view>
		<view style="height:200rpx;">
			<u-transition type="scale" :show="showani">
				<view class="showani">
					<view>放大动画</view>
				</view>
			</u-transition>
			<u-transition type="down" :show="showani1">
				<view class="showani">
					<view>由上往下</view>
				</view>
			</u-transition>
			<u-transition type="up" :show="showani2">
				<view class="showani">
					<view>由下往上</view>
				</view>
			</u-transition>
		</view>
		
		<!--
		通用上拉加载动画为空占位图 u-loading
		参数说明：empty [true|false] 是否为空数据; nomore [true|false] 是否加载完成
		默认都为false 当没有数据时将empty 和 nomore都设为true
		当有数据时将 nomore加载完成时设为true; empty 为 false
		-->	
		<u-loading :empty="false" :nomore="false"></u-loading>	
		<u-loading :empty="false" :nomore="true"></u-loading>
		<u-loading :empty="true" :nomore="false"></u-loading>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs:["全部","待付款","待发货","待收货","待评价","待付款","待发货","待收货","待评价"],
				tabs2:['哈哈','呵呵','哦哦','嘿嘿'],
				scroll:true,
				current:0,
				current2:0,
				content:'',
				checked:false,
				ids:'',
				names:'',
				showani:false,
				showani1:false,
				showani2:false,
			}
		},
		onLoad() {

		},
		methods: {
			 tabclick(e){
				 this.current = e.index
			 },
			 tabclick2(e){
			 	 this.current2 = e.index
			 },
			 show(){
				 this.content = "你真是个好人？"
				 this.$refs.alert.open()
			 },
			 show2(){
				 this.content = "你真的是大神吗？"
				 this.$refs.alert2.open()
			 },
			 confirm(){
				 console.log('点击了确定')
				 this.$refs.alert.close()
			 },
			 confirm2(){
				 console.log('点击了确定')
				 this.$refs.alert2.close()
			 },
			 cancel(){
				 console.log('点击了取消')
				 this.$refs.alert2.close()
			 },
			 change(e){
				 console.log(e)
				 this.checked = this.checked ? false : true
				 console.log(this.checked)
			 },
			 select(){
				 let list = [] //模拟数据可无限级目前模拟两级
				 for(let i = 1; i < 20; i++){
					 list.push({id:i,name:`部门${i}`,childList:[]})
				 }
				 list.forEach((res,index)=>{
					  for(let i = 1; i < 20; i++){
							let obj = {id:i,name:`下级部门${i}`,childList:[]}
							res.childList.push(obj)
						}
				 })				
				 this.$refs.duo.open('选择部门',list,'name');
			 },
			 confirmSelect(result){
				 console.log(result,'选择后结果')
				 let last = result[result.length-1]
				 let ids = []
				 let names = []
				 result.forEach(res=>{
				 	ids.push(res.list[res.index].id)
				 	names.push(res.list[res.index].name)
				 })
				 this.ids = ids.join(',')
				 this.names = names.join(',')
			 },
			 
			 open(){
				 this.showani = this.showani ? false : true
			 },
			 open1(){
				 this.showani1 = this.showani1 ? false : true
			 },
			 open2(){
				 this.showani2 = this.showani2 ? false : true
			 }
			 
		}
	}
</script>

<style>
.top{ margin-bottom:20rpx; }
.center{ display: flex; justify-content: center; align-items: center;}
.content{ padding:20rpx; font-size: 28rpx; color:#666;}
.btn{ width:200rpx; margin:0 auto; font-size:28rpx; height:90rpx; background:#1479FC; color:#fff; border-radius:90rpx;}
.btn:active{opacity:0.9;}
.inext{ border:1px solid #ddd; font-size:26rpx; margin:50rpx 20rpx; padding:20rpx; border-radius:5rpx;}
.showani{ background:#007AFF; width:400rpx; margin:50rpx auto; padding:20rpx; color:#fff;}
</style>
